<template>
	<view>
		<view class="box cflex">
			<image :src="head_image" mode="" class="avater"></image>
			<view class="text">
				<view class="name">{{name}}</view>
				<view class="phone">手机号：{{mobile}}</view>
			</view>
			<view class="" @tap="toset2">				
				<image src="/static/dxy-image/you_1@2x.png" class="you" mode=""></image>
			</view>
		</view>

		<view class="quit" @tap="quit">
			退出登录
		</view>

		<view class="zz" v-if="model==true">
			<view class="model flex">
				<view class="tit">退出登录</view>
				<view class="content">
					你确定要退出登录吗？
				</view>
				<view class="bottom cflex">
					<view class="cancel" @tap="cancel">
						取消
					</view>
					<view class="confirm" @tap="confirm">
						确定
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	import uniIcons from '../../components/uni-icons.vue';
	import uniNavBar from '../../components/uni-nav-bar.vue';
	export default {
		components: {
			uniIcons,
			uniNavBar
		},
		data() {
			return {
				model: false,
				head_image: "",
				level: "",
				mobile: "",
				name: ""
			}
		},
		onLoad() {
			let that = this
			that.getUser()
		},
		methods: {
			toset2(){
				let that=this
				uni.navigateTo({
					url:"../set2/set2"
				})
			},
			getUser() {
				let that = this
				let token = uni.getStorageSync("token")
				console.log("token", token)
				ajax({
					url: 'user/getUser',
					data: {
						token: token
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						that.head_image = res.data.data.head_image
						that.mobile = res.data.data.mobile
						that.name = res.data.data.name
						console.log("token", res.data)
					},
					error: function() {

					}
				});
			},
			quit() {
				let that = this
				that.model = true
			},
			cancel() {
				let that = this
				that.model = false
			},
			confirm(){
				let that=this
				let token=uni.getStorageSync('token')
				ajax({
					url: 'login/logout',
					data: {
						token: token
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.navigateTo({
							url:"../../mine/mine"
						})
					},
					error: function() {
				
					}
				});
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;

	}

	.box {
		background-color: #FFFFFF;
		padding-top: 50rpx;
		padding-bottom: 42rpx;
		font-size: 28rpx;
		margin-top: 50rpx;
	}

	.avater {
		width: 98rpx;
		height: 98rpx;
		border-radius: 100rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.text {
		margin-top: 5rpx;
		line-height: 40rpx;
		color: #333333;
	}

	.you {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		right: 69rpx;
		top: 80rpx;
	}

	.quit {
		height: 66rpx;
		background-color: #FFFFFF;
		margin-top: 28rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 66rpx;
		color: #333333;
	}

	.zz {
		background-color: rgba(0, 0, 0, 0.5);
		height: 100%;
		width: 750rpx;
		position: absolute;
		top: -50rpx;
	}

	.model {
		width: 620rpx;
		height: 350rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 400rpx;
		left: 65rpx;
		border-radius: 20rpx;
	}

	.tit {
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		margin-top: 23rpx;
	}

	.content {

		text-align: center;
		font-size: 28rpx;
		color: #333333;
		margin-top: 98rpx;
	}

	.bottom>view {
		width: 50%;
		text-align: center;
		margin-top: 66rpx;
		font-size: 28rpx;
		line-height: 88rpx;
	}

	.cancel {
		background-color: #F7F7F7;
		height: 88rpx;
		border-bottom-left-radius: 20rpx;
	}

	.confirm {

		background-color: #FF7427;
		height: 88rpx;
		border-bottom-right-radius: 20rpx;
		color: #FFFFFF;
	}
</style>
